/**
 * 
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2021-07-28 12:48:28
 * @version v2.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试！
// ...


/**
 * 获取元素
 */
const form = document.querySelector('form')
const title = document.querySelector('#title')
const todocount = document.querySelector('#todocount')
const todolist = document.querySelector('#todolist')
const ol_li = document.querySelectorAll('ol > li')
const donecount = document.querySelector('#donecount')
const ul_li = document.querySelectorAll('ul > li')
const box = document.querySelector('.box')
const del = document.querySelector('.del')
const donelist = document.querySelector('#donelist')
let users = JSON.parse(window.localStorage.getItem('users')) || []
let meat = JSON.parse(window.localStorage.getItem('list')) || []
add()
function add() {
    let str = ''
    users.forEach(item => {
       str += `
     <li>
       <input type="checkbox" / data-id="${item.id}" class="box">
       <p onclick="edit(1)">${item.title}</p>
       <a data-id="${item.id}" class="del")">-</a>
     </li>
       ` 
    })
    todolist.innerHTML = str
    todocount.innerText = users.length 
    window.localStorage.setItem('users', JSON.stringify(users))
}
repeat()
function repeat() {
    let str = '' 
    meat.forEach(item => {
        str += `
        <li>
            <input type="checkbox" checked="checked" />
            <p onclick="edit(4)">${item.article}</p>
            <a href="javascript:remove(4)">-</a>
        </li>
        `
    })
    donelist.innerHTML = str
    donecount.innerText = meat.length
}
form.addEventListener('submit', e => {
e = e || window.event
try { e.preventDefault() } catch(err) { e.returnValue === false}
    if (title.value.trim() === '') return 
    const info = {
        id: !users.length ? 1 : users[users.length - 1].id + 1,
        title: title.value.trim() 
    }
    users.push(info)
    add()
    title.value = ''
})
todolist.addEventListener('click', e => {
    e = e || window.event
    const target = e.target || e.srcElement
    if (target.className === 'del') {
        const id = target.dataset.id - 0
        users = users.filter(item => item.id !== id)
        add()
    }
    if (target.className === 'box') {
        const id = target.dataset.id - 0
        // 
        const str = users.find(item => item.id === id)
        console.log(str)
        const text = {
            article: str.title
        }
        meat.push(text)
        repeat()
        users = users.filter(item => item.id !== id)
        add()
        window.localStorage.setItem('meat', JSON.stringify(meat))
    }
})


/**
 * 编辑代办事项
 */
function edit(){
    console.log("edit method");
}

/**
 * 移除代办事项
 */
function remove(){
    console.log("remove method");
}

/**
 * 跨域解决方案代码/配置粘贴处（请粘贴在块状注释范围内）

 */